import uavIcon from "../../assets/img/uavIcon.jpeg"
import {GET_MAPBOX_MAP} from "./CreateMap";
import * as turf from '@turf/turf';
import mapboxgl from "mapbox-gl";
import floor from "../../assets/img/floor.jpg"


export const testLine = () => {

    const map = GET_MAPBOX_MAP();
    // 起点
    var origin = [118.75163,32.046901];

    // 路径图层.
    var route = {
        'type': 'FeatureCollection',
        'features': [
            {
                'type': 'Feature',
                'geometry': {
                    'type': 'LineString',
                    'coordinates': [origin, [118.752188, 32.036606],[118.76223, 32.038862],[118.762102, 32.047447],origin]
                }
            }
        ]
    };

    //飞机图层，初始点设置为上面路径的起点
    var point = {
        'type': 'FeatureCollection',
        'features': [
            {
                'type': 'Feature',
                'properties': {},
                'geometry': {
                    'type': 'Point',
                    'coordinates': origin
                }
            }
        ]
    };

    // 计算路径的长度
    var lineList = turf.lineString(route.features[0].geometry.coordinates);
    var lineDistance = turf.length(lineList, {units: "kilometers"});
    //路径分段
    var arc = [];

    // 走多少步走完
    var steps = 200;

    // 把每一步的下一个点存到路径里面去，然后让飞机按个点去走
    for (var i = 0; i < lineDistance+1; i += lineDistance / steps) {
        var segment = turf.along(lineList, i, {units: "kilometers"});
        arc.push(segment.geometry.coordinates);
    }
    route.features[0].geometry.coordinates = arc;

    // 创建GeoJSON对象表示禁飞区
    // 测试数据
    var noFlyZone = {
        type: 'Feature',
        properties: {},
        geometry: {
            type: 'Polygon',
            coordinates: [
                [[119.936704, 31.77829], [119.936876, 31.767053],[119.949493, 31.767053],[119.952111, 31.776137], [119.952111, 31.77829]] // 定义一个矩形区域作为圆形的近似表示
            ]
        }
    };


    // 第一步.
    var counter = 0;
    //加载图层
    map.on('load',function(){

        // 加载路径数据源
        map.addSource('route', {
            'type': 'geojson',
            'data': route
        });
        //加载飞机数据源
        map.addSource('point', {
            'type': 'geojson',
            'data': point
        });
        //加载路径图层
        map.addLayer({
            'id': 'route',
            'source': 'route',
            'type': 'line',
            'paint': {
                'line-width':10,
                'line-blur': 3,
                'line-opacity': 0.4,

                'line-color': '#007cbf'
            }
        });
        //加载图标
        map.loadImage(uavIcon,function(error,image) {
            if(error) throw error;
            if(!map.hasImage('airport-15')){
                map.addImage('airport-15',image);
            }
        })
        //加载飞机图层，这里设置了一下在缩放范围到达7之后，才会显示
        map.addLayer({
            'id': 'point',
            'source': 'point',
            'type': 'symbol',
            'layout': {
                'icon-image': 'airport-15',
                'icon-rotate': ['get', 'bearing'],
                'icon-rotation-alignment': 'map',
                'icon-allow-overlap': true,
                'icon-ignore-placement': true,
                'icon-size':{
                    "type": "interval",
                    "stops": [
                        [0, 0],
                        [14, 0],
                        [15, 3]
                    ]
                },
                "icon-offset": [0, -10],
            }
        });

        // 动画函数 从路径上挨个去点，将点setdata进飞机图层中
        function animate() {
            //如果走到头了，那就重新走，无限循环
            if(counter == steps){
                point.features[0].geometry.coordinates = origin;

                // Update the source layer
                map.getSource('point').setData(point);

                // Reset the counter
                counter = 0;

                // Restart the animation.
                animate(counter);
                return
            }

            // 更新飞机图层的坐标
            point.features[0].geometry.coordinates =
                route.features[0].geometry.coordinates[counter];

            // 设置角度
            point.features[0].properties.bearing = turf.bearing(
                turf.point(
                    route.features[0].geometry.coordinates[
                        counter >= steps ? counter - 1 : counter
                        ]
                ),
                turf.point(
                    route.features[0].geometry.coordinates[
                        counter >= steps ? counter : counter + 1
                        ]
                )
            );

            // 更新飞机图层的数据，主要是坐标和角度
            map.getSource('point').setData(point);

            // 循环动画 一直到走完.
            if (counter < steps) {
                requestAnimationFrame(animate);
            }
            counter = counter + 1;
        }

        // 调用动画
        animate(counter);

    })
    map.on('style.load', () => {
        // Insert the layer beneath any symbol layer.
        const layers = map.getStyle().layers;
        const labelLayerId = layers.find(
            (layer) => layer.type === 'symbol' && layer.layout['text-field']
        ).id;

        map.addLayer(
            {
                'id': 'add-3d-buildings',
                'source': 'composite',
                'source-layer': 'building',
                'filter': ['==', 'extrude', 'true'],
                'type': 'fill-extrusion',
                'minzoom': 15,
                'paint': {
                    'fill-extrusion-color': '#aaa',

                    // Use an 'interpolate' expression to
                    // add a smooth transition effect to
                    // the buildings as the user zooms in.
                    'fill-extrusion-height': [
                        'interpolate',
                        ['linear'],
                        ['zoom'],
                        15,
                        0,
                        15.05,
                        ['get', 'height']
                    ],
                    'fill-extrusion-base': [
                        'interpolate',
                        ['linear'],
                        ['zoom'],
                        15,
                        0,
                        15.05,
                        ['get', 'min_height']
                    ],
                    'fill-extrusion-opacity': 0.6
                }
            },
            labelLayerId
        );
    })

    // map.on('click', function(e) {
    //     var coordinates = [e.lngLat.lng, e.lngLat.lat]; // 获取点击坐标
    //     var geojson = {
    //         type: 'Feature',
    //         properties: {},
    //         geometry: {
    //             type: 'Polygon',
    //             coordinates: [turf.circle(coordinates, 50, {units: 'meters'}).geometry.coordinates[0]] // 创建半径为50米的圆形禁区
    //         }
    //     };
    //     // 将禁区添加到地图上
    //     map.addLayer({
    //         id: 'circle-layer', // 图层ID
    //         type: 'fill', // 图层类型，这里是填充图层，用于显示圆形区域
    //         source: {
    //             type: 'geojson', // 数据源类型为GeoJSON
    //             data: geojson // GeoJSON数据对象
    //         },
    //         paint: { // 绘制样式
    //             'fill-color': '#fbb03b', // 填充颜色
    //             'fill-opacity': 0.5 // 填充透明度
    //         }
    //     });
    //     // 在禁区上添加3D圆柱特效（这里使用自定义图标或自定义图层来实现）
    //     // 由于Mapbox原生不支持直接在填充图层上添加3D效果，我们可以使用自定义图标或者自定义3D模型（如使用自定义图层）来模拟效果。例如，可以使用自定义图标来表示圆柱。
    //     var el = document.createElement('div'); // 创建一个div元素作为图标容器
    //     el.style.backgroundImage = 'url(path_to_your_cylinder_icon.png)'; // 设置背景图像为你的圆柱图标路径
    //     el.style.width = '32px'; // 设置宽度和高度以匹配图标大小
    //     el.style.height = '32px'; // 设置宽度和高度以匹配图标大小
    //     var img = new Image(50, 50);
    //     img.src = floor;
    //     var popup = new mapboxgl.Popup({offset: 25}) // 创建弹出框对象，用于显示自定义图标或文字信息等。这里仅为示例，实际使用时可以根据需要调整。
    //         .setHTML(img); // 设置弹出框内容为圆柱图标（仅为示例，实际使用时可以根据需要调整）
    //     new mapboxgl.Marker(el)
    // })
}
